﻿@page "/AutoComplete/Grouping-Icon"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the grouping and icons supports to the AutoComplete. Type a character in the AutoComplete element and choose an item from the categorized list/icons list.</p>
</SampleDescription>
<ActionDescription>
   <p>The AutoComplete allows to group the relevant items under a corresponding category by mapping the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_GroupBy' target='_blank'> GroupBy</a> field, and allows to load the list items with icons. And also enabled the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_ShowPopupButton' target='_blank'> ShowPopupButton</a> property to show all the suggestion items while clicking on popup button.</p>
   <p>The grouping sample illustrates how the vegetables are grouped based on its category.</p>
   <p>The 2nd AutoComplete is populated with icons which is rendered by mapping the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteFieldSettings.html#Syncfusion_Blazor_DropDowns_AutoCompleteFieldSettings_IconCss' target='_blank'> IconCss</a> field.</p>
   <p>More information on the grouping feature configuration can be found in the<a href='https://blazor.syncfusion.com/documentation/autocomplete/grouping/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div id="groupList" class="col-lg-6 auto-padding">
        <div class="content">
            <h4>Grouping</h4>
            <SfAutoComplete TValue="string" TItem="Vegetables" Placeholder="e.g. Cabbage" DataSource="@GroupData" ShowPopupButton="true">
                <AutoCompleteFieldSettings GroupBy="Category" Value="Vegetable"></AutoCompleteFieldSettings>
            </SfAutoComplete>
        </div>
    </div>
    <div id="iconList" class="col-lg-6 auto-padding">
        <div class="content">
            <h4> Icons</h4>
            <SfAutoComplete TValue="string" TItem="SocialMedia" Placeholder="e.g. Facebook" DataSource="@IconData" ShowPopupButton="true">
                <AutoCompleteFieldSettings IconCss="Class" Value="SocialMediaName"></AutoCompleteFieldSettings>
            </SfAutoComplete>
        </div>
    </div>
</div>
<link href="styles/dropdown-list/grouping.css" rel="stylesheet" />

@code{
    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string ID { get; set; }
    }

    public class SocialMedia
    {
        public string Class { get; set; }
        public string SocialMediaName { get; set; }
        public string Id { get; set; }
    }

    List<SocialMedia> IconData = new List<SocialMedia>()
{
        new SocialMedia() { Class= "facebook", SocialMediaName= "Facebook", Id= "media1" },
        new SocialMedia() { Class= "google-plus", SocialMediaName= "Google Plus", Id= "media2" },
        new SocialMedia() { Class= "instagram", SocialMediaName= "Instagram", Id= "media3" },
        new SocialMedia() { Class= "linkedin", SocialMediaName= "LinkedIn", Id= "media4" },
        new SocialMedia() { Class= "skype", SocialMediaName= "Skype", Id= "media5" },
        new SocialMedia() { Class= "tumblr", SocialMediaName= "Tumblr", Id= "media6" },
        new SocialMedia() { Class= "twitter", SocialMediaName= "Twitter", Id= "media7" },
        new SocialMedia() { Class= "vimeo", SocialMediaName= "Vimeo", Id= "media8" },
        new SocialMedia() { Class= "whatsapp", SocialMediaName= "WhatsApp", Id= "media9" },
        new SocialMedia() { Class = "youtube", SocialMediaName= "YouTube", Id = "media10" },
    };

    List<Vegetables> GroupData = new List<Vegetables>()
{
        new Vegetables() { Vegetable = "Cabbage", Category = "Leafy and Salad", ID = "item1" },
        new Vegetables() { Vegetable = "Chickpea", Category = "Beans", ID = "item2" },
        new Vegetables() { Vegetable = "Garlic", Category = "Bulb and Stem", ID = "item3" },
        new Vegetables() { Vegetable = "Green bean", Category = "Beans", ID = "item4" },
        new Vegetables() { Vegetable = "Horse gram", Category = "Beans", ID = "item5" },
        new Vegetables() { Vegetable = "Nopal", Category = "Bulb and Stem", ID = "item6" },
        new Vegetables() { Vegetable = "Onion", Category = "Bulb and Stem", ID = "item7" },
        new Vegetables() { Vegetable = "Pumpkins", Category = "Leafy and Salad", ID = "item8" },
        new Vegetables() { Vegetable = "Spinach", Category = "Leafy and Salad", ID = "item9" },
        new Vegetables() { Vegetable = "Wheat grass", Category = "Leafy and Salad", ID = "item10" },
        new Vegetables() { Vegetable = "Yarrow", Category = "Leafy and Salad", ID = "item11" },
    };
}

<style>
    .content {
        width: 270px;
        margin-left: 50px;
    }

    .auto-padding {
        padding-top: 15px;
    }
</style>